<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/8/20
  Time: 16:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="resroot" value="${ctx}/common"/>
<c:set var="jsroot" value="${resroot}/js"/>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link href="${ctx}/common/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .row {
      margin-right: 0px;
      margin-left: 0px;
    }
    .span-text {
      margin-top: 5px;
    }

    a {
      color: #05a;
      text-decoration: none;
    }

    a:hover {
      color: #0055aa;

    }
    .main{
      padding-top: 128px;
      position: relative;
    }
    .panel-body{
      padding: 0px;
    }
    .btn{
      margin-left: 20px;
    }
    .btn1{
      line-height: 25px;
    }
    .btn1 p{
      padding-top: 8px;
    }
    .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
      color: #fff;
      background-color: #ff4001;
    }
  </style>
</head>
<body>
<div style="position: fixed;z-index: 1;left: 0px;right: 0px;">
  <div style="background: #f9f9f9;">
    <div class="container" style="height: 28px;">
      <div class="row nav1">
        <div class="col-xs-6">
          <div class="pull-left span-text">
            <span class="glyphicon glyphicon-map-marker"></span>广州
          </div>
        </div>
        <div class="col-xs-6">
          <div class="pull-right span-text">
            <span class="glyphicon glyphicon-user"></span>联系客服
            &nbsp;
            <span class="glyphicon glyphicon-comment"></span>微信
          </div>
        </div>
      </div>
    </div>
  </div>
  <hr style="margin-top: 0px;margin-bottom: 0px;">
  <div class="container-fluid" style="padding: 20px 0;background: #FFFFFF;opacity:0.9">
    <div class="row">
      <div class="col-xs-3">
        <img src="${ctx}/common/images/home/logo.png" style="padding-top: 12px;margin-left: 80px"/>
      </div>
      <div class="col-xs-6">
        <ul class="nav nav-pills nav-justified">
          <li class=><a href="#">首页</a></li>
          <li><a href="#">蛋糕</a></li>
          <li><a href="#">甜品</a></li>
          <li><a href="#">烘焙</a></li>
          <li><a href="#">礼品包装</a></li>
          <li><a href="#">我的诺心</a></li>
        </ul>
      </div>
      <div class="col-xs-3">
        <div class="pull-right">
          <button type="button" class="btn btn-link" style="padding: 6px 0px;"><a href="/login.action">登录</a></button>
          /
          <button type="button" class="btn btn-link" style="padding: 6px 0px;margin: auto"><a href="/register.action">注册</a></button>
          <button id="headerCart" type="button" class="btn btn-link glyphicon glyphicon-shopping-cart"
                  style="padding: 6px 10px;color: #ff4001;margin: auto"></button>
        </div>

      </div>
    </div>
  </div>
  <hr style="margin-top: 0px;margin-bottom: 0px;">

</div>
<div class="container main">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="images">
        <img style="height: 100%;width:100%;" src="${ctx}${url.url}" alt="图片">
        <%--<img style="height: 100%;width:100%;" src="${detailGoods.url}" alt="图片">--%>
      </div>
      <div id="goods" style="width: 445px;margin-left: 30px;float: left;">
        <c:forEach var = "item" items="${detailGoods}" varStatus="status">
          <c:if test="${status.index == 0}">
            <h4 goodsPrice="${status.index}" style="padding-top:20px;">${item.goodsName}
              <p class="pull-right" style="color:#ff4001;padding-right: 50px">￥${item.price}</p>
            </h4>
          </c:if>
          <c:if test="${status.index > 0}">
            <h4 goodsPrice="${status.index}" style="padding-top:20px;display: none">${item.goodsName}
              <p class="pull-right" style="color:#ff4001;padding-right: 50px ">￥${item.price}</p>
            </h4>
          </c:if>

        </c:forEach>

        <%--<h4>雪域牛乳芝士蛋糕
          <p class="pull-right" style="color:#ff4001 ">￥198</p>
        </h4>--%>
        <p style="font-size: 11px"><img style="width: 22px;height: 22px" src="/common/images/products/record.png" alt="图片">提交订单或直接进入订单详情页即可上传语音</p>
        <hr>
      </div>
      <div  style="margin-left: 500px;">
        <small style="padding-left: 20px;color: gray">建议食用人数</small>
        <br>
        <ul id="modalGoodsSpe" class="nav nav-pills " style="list-style: none;margin-top: 10px">
          <c:forEach var="item" items="${detailGoods}" varStatus="status">
            <c:if test="${status.index == 0}">
              <li class="active" goodsSpe="${status.index}" style="float: left; margin-left: 52px;"><a class="size" href="javascript:void (0)">${item.speName}</a></li>
            </c:if>
            <c:if test="${status.index > 0}">
              <li goodsSpe="${status.index}" style="float: left; margin-left: 0px;" ><a class="size" href="javascript:void (0)">${item.speName}</a></li>
            </c:if>
          </c:forEach>

          <%--<li class="active" style="float: left; margin-left: 52px;"><a class="size" href="javascript:void (0)">2-4人食</a></li>
          <li style="float: left; margin-left:0 "><a class="size" href="javascript:void (0)">5-8人食</a></li>
          <li style="float: left; margin-left: 0px"><a class="size" href="javascript:void (0)">10-12人食</a></li>
          <li style="float: left; margin-left: 0px"><a class="size" href="javascript:void (0)">15-20人食</a></li>--%>
        </ul>
        <div class="d_btn" style="margin-top: 30px">
          <button type="button" style="color: #FFFFFF;background-color: #ff4001;width: 160px;margin-left: 30px" class="btn1">
            <p class="text-center" style="font-weight: bold">加入购物车+</p></button>
          <button type="button" style="color: #ff4001;background-color: #FFFFFF;border:#ff4001 solid 1px;margin-left: 50px;width: 160px"
                  class="btn1"><p class="text-center" style="font-weight: bold">立即登录</p></button>
        </div>
      </div>
      <div style="background:#ebebeb;margin-top: 30px;">
        <div class="row" style="background: #ebebeb;padding-top: 50px;">
          <div class="col-xs-5"></div>
          <div class="col-xs-1 text-center">
            <a href="javascript:void(0);">
              <span class="glyphicon glyphicon-user" style="font-size: 30px;"></span>
              <small style="display: block;">客服</small>
            </a>
          </div>
          <div class="col-xs-1 text-center">
            <a href="javascript:void(0);">
              <span class="glyphicon glyphicon-cloud" style="font-size: 30px;"></span>
              <small style="display: block;">微信</small>
            </a>
          </div>
          <div class="col-xs-5"></div>
        </div>
        <div class="row text-center" style="background: #ebebeb;padding-top: 20px;">
          <small>客服电话：18578752336&nbsp;&nbsp;服务时间：（08:30-20:30）</small>
        </div>

        <div class="row" style="padding:0;background: #ebebeb;box-sizing: content-box">
          <div class="col-xs-1" ></div>
          <div class="col-xs-10">
            <ol class="breadcrumb text-center" style="background:#ebebeb; ">
              <li><a href="#">诺心公告</a></li>
              <li><a href="#">关于诺心</a></li>
              <li><a href="#">联系我们</a></li>
              <li><a href="#">客服服务</a></li>
              <li><a href="#">食品经营许可证</a></li>
              <li><a href="#">生产许可证</a></li>
              <li><a href="#">工商管理</a></li>
            </ol>
          </div>
          <div class="col-xs-1"></div>
        </div>
        <div class="row text-center" style="background: #ebebeb;padding-top: 20px;">
          <small>诺心食品（上海）有限公司 上海徐汇区田林路140号28号楼 客服邮箱：services@lecake.com 公司电话：4001-578-578</small>
        </div>
        <div class="row text-center"
             style="background: #ebebeb;padding-top: 20px;padding-bottom: 30px;">
          <small>copyright©2010-2017诺心lecake.com版权所有 沪ICP备10211730</small>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="${ctx}/common/js/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/common/js/bootstrap.min.js"></script>
<script src="${ctx}/common/js/jquery.cookie.js"></script>
<script src="${ctx}/common/js/json2.js"></script>
<script>

  $('#modalGoodsSpe').on('click','[goodsSpe]',function () {
//            speId = $(this).attr('speId');
    var index = $(this).attr('goodsSpe');
//    var i = $('#goods').find('h4').attr('goodsPrice');
    var speSize = $('[goodsSpe]').length;
//    alert(speSize);
    $(this).addClass('active')
            .siblings().removeClass("active");
    for(var i = 0; i <= speSize; i++){
      if(index == i){
        $('[goodsPrice="'+i+'"]').show();
      }else{
        $('[goodsPrice="'+i+'"]').hide();
      }
    }
  });

  //获取url中的参数
  /*function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r != null) return unescape(r[2]); return null; //返回参数值
  }

  $(function(){
    var goodsId = getUrlParam("goodsId");
    $.post("/detailGoods.action",{goodsId:goodsId},function(result){
      var goodsHtml = '';
      var speHtml = '';
      $.each(result, function(index,value) {
        goodsHtml+='<h4>'+value.goodsName+'<p class="pull-right" style="color:#ff4001 ">'+value.price+'</p></h4>';
        if(index == 0){
          speHtml+='<li class="active" style="float: left; margin-left: 52px;"><a class="size" href="javascript:void (0)">'+value.speName+'</a></li>';
        }else{
          speHtml+='<li style="float: left; margin-left:0 "><a class="size" href="javascript:void (0)">'+value.speName+'</a></li>';
        }

      });
      $('#goods').html(goodsHtml);
    },'json');
  })*/
</script>

</html>